<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-content">
      <template v-if="listData.length > 0">
        <view class="list-item" v-for="(item, index) in listData" :key="index">
          <view class="list-header">
            <view class="item-time">{{ item.date }}</view>
            <view class="item-total">
              <text>{{ $t('facePay.income') }}</text>
              <text>+{{ item.totalPrice | formatNum }}</text>
              <text>{{ item.data.length }}笔</text>
            </view>
          </view>
          <view class="record-item" v-for="(record, i) in item.data" :key="i">
            <view class="record-info">
              <view
                >{{ $t('facePay.trade')
                }}{{ record.nickname | substrStr }}</view
              >
              <view>{{ record.created_at | timestampToTime }}</view>
            </view>
            <view class="record-money">+{{ record.amount | formatNum }}</view>
          </view>
        </view>
      </template>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      listData: [],
    };
  },
  onLoad(t) {
    this.getRecordList();
  },
  filters: {
    formatNum(num) {
      let str = String(num).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,');
      if (str.split('.').length == 1) {
        str = str + '.00';
      }
      return str;
    },
    substrStr(str) {
      return `-**${str.substr(str.length - 1)}`;
    },
    timestampToTime(timestamp) {
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
      let m =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
      let s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return `${h}:${m}:${s}`;
    },
  },
  methods: {
    // 获取记录列表
    getRecordList() {
      this.$allrequest.facePay.getRecordList({}).then(res => {
        if (!res.code && res.data) {
          let list = res.data || [];
          if (list.length > 0) {
            list.forEach(d => {
              let total = 0;
              if (d.data.length == 1) {
                total = d.data[0].amount;
              } else {
                total = d.data.reduce(
                  (a, b) => Number(a.amount) + Number(b.amount)
                );
              }

              d['totalPrice'] = total;
            });
            this.listData = list;
          } else {
            // 如果没有记录，则提示后，返回上一页
            uni.showToast({
              title: this.$t('facePay.noRecord'),
              icon: 'none',
              duration: 2000,
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #0eb5f8;

  .page-content {
    width: 702rpx;
    margin: 0 auto;
    padding-top: 24rpx;

    .list-item {
      width: 100%;
      background: #ffffff;
      border-radius: 14rpx;
      padding: 0 25rpx;
      margin-bottom: 24rpx;

      .list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 49rpx 0;

        .item-time {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191919;
        }

        .item-total {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191919;

          text:nth-child(1) {
            font-weight: 400;
            color: #888888;
          }
          text:nth-child(2) {
            margin: 0 31rpx 0 36rpx;
          }
        }
      }

      .record-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 29rpx 0 24rpx 0;
        border-top: 1rpx solid #eeeeee;

        .record-info {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #191919;
          view:last-child {
            font-size: 24rpx;
            font-weight: 500;
            color: #888888;
            margin-top: 15rpx;
          }
        }

        .record-money {
          font-size: 36rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ff4b33;
        }
      }
    }
  }
}
</style>
